// 调用函数，使用富文本编辑器

let form = layui.form;

//获取id的新的方法
let id = new URLSearchParams(location.search).get("id");

//读取后台数据渲染到文章类别的下拉菜单 先进行菜单渲染,再回填数据
$.ajax({
  url: "/my/article/cates",
  success: function (res) {
    // console.log(res)
    let htmlStr = template("tpl-category", res);
    $("select[name=cate_id]").append(htmlStr);
    // 动态生成了下拉框的选项，要更新渲染
    //只要使用form就要声明一下
    form.render("select");

    //发送请求，获取当前文章内容。获取到之后，进行数据回填
    $.ajax({
      url: "/my/article/" + id,
      success: function (res) {
        console.log(res);
        // return
        // 使用layui.val 方法快速为表单赋值
        form.val("edit-form", res.data);
        // 先把textarea的内容进行回填。然后在更换成富文本编辑器
        // 调用函数，使用富文本编辑器
        initEditor();
        //更滑图片
        $image
          .cropper("destroy")
          .attr("src", "http://ajax.frontend.itheima.net" + res.data.cover_img)
          .cropper(options);
      },
    });
  },
});

//图片的处理
$image = $("#image");

let options = {
  // 宽高比
  aspectRatio: 400 / 280,
  // 指定预览器
  preview: ".img-preview",
  autoCropArea: 1,
};
//调用方法,完成页面的渲染
$image.cropper(options);

//点击按钮,触发文件域按钮的点击事件,可以选择文件
$('button:contains("选择封面")').on("click", function () {
  $("#file").trigger("click");
});

//文件域内容更改,更改预览区图片
$("#file").on("change", function () {
  let fileObj = this.files[0]; //选中目标元素的第一个文件
  //通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
  let url = URL.createObjectURL(fileObj);
  // 销毁原来的剪裁区 --> 更换图片 --> 重新生成剪裁区
  $image.cropper("destroy").attr("src", url).cropper(options);
});

//添加文章
//基本步骤 ,提交表单 阻止默认行为 收集表单数据 提交ajax
$("#add-form").on("submit", function (e) {
  e.preventDefault();
  //需要使用formdate收集数据
  let fd = new FormData(this);
  // 不要使用append，要使用set来更换原来的content
  //富文本编辑方法,直接使用textarea无法获取,因为这个元素被文本编辑框替代了
  //根本就无法获取
  fd.set("content", tinyMCE.activeEditor.getContent());
  //处理图片  图片的地址在表单中也是无法获取
  let canvas = $image.cropper("getCroppedCanvas", {
    width: 400,
    height: 280,
  });
  //把画布转化成可以使用,符合接口文档的格式
  canvas.toBlob(function (blob) {
    console.log(blob);
    // 向FormData对象中，追加 cover_img
    fd.append("cover_img", blob);
    // 通过遍历fd，检查fd对象中有哪些值
    // fd.forEach((value, key) => {
    //     console.log(key, value);
    // })
    //return; //这里写个return相当于注释,让下面的代码先不要执行,
    $.ajax({
      type: "POST",
      url: "/my/article/add",
      data: fd,
      //有两个必填的代码
      processData: false,
      contentType: false,
      success: function (res) {
        layer.msg(res.message);
        if (res.status === 0) {
          location.href = "/article/articlelist.html";
        }
      },
    });
  });
});


//删除事件,因为按钮时动态生成的,需要用事件委托

